<template>
  <div>
    <a-modal v-model="visible" :title="`回复 ${prev.userName}`" @ok="reply">
      <a-textarea :rows="4" v-model="content"></a-textarea>
    </a-modal>
    <div class="reply pos-rlt" v-for="it in list" :key="`reply${it.id}`">
      <ZgImgHolder class="pos-abs t10 l10" isHead :src="it.userHead"/>
      <div class="name">
        <span style="font-size:18px;">{{ it.userName }}</span>
        <span style="margin-left:10px;color:#999">{{ it.createTime | fromNow }}</span>
      </div>
      <div class="content">
        {{ it.content }}
      </div>
      <div style="margin:10px 0;">
        <div class="outter" @click="toReply(it)" v-show="it.layer<5" >
          <i class="fa fa-commenting-o mr5" title="评论">
          </i>
          <span v-if="it.replyTimes>0">{{ it.replyTimes }}条</span>评论
        </div>
        <ZgPraise :objType="objType" :objKey="it.id" style="display:inline-block"></ZgPraise>
        <a-button style="border:0;" size="small" v-show="it.replyTimes>0" type="" @click="toggle(it)">
          <span class="mr5">查看</span><i style="margin-left:4px;" class="fa" :class="!it.showChild?'fa-angle-down':'fa-angle-up'"/>
        </a-button>
      </div>
      <div v-if="it.showChild">
        <ZgReply :objType="objType" :list="it.children"></ZgReply>
        <a-pagination :pageSize="5" v-show="it.replyTimes>5" size="small" :total="it.replyTimes" @change="(page)=>onPageChange(page,it)"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    objType: {
      type: String,
      default: 'default'
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      pageSize: 5,
      visible: false,
      prev: {
        user: {
          name: '未知用户',
          head: '/head.png'
        }
      },
      content: ''
    }
  },
  methods: {
    onPageChange (page, it) {
      it.page = page
      this.search(it)
    },
    search (it) {
      this.$http.get('/zg-system/reply/next/page', {
        replyId: it.id,
        page: it.page,
        pageSize: this.pageSize
      }, data => {
        it.children = data.records.map(t => {
          t.page = 1
          t.children = []
          t.showChild = false
          return t
        })
        it.total = parseInt(data.total)
        it.showChild = true
      })
    },
    toggle (it) {
      if (!it.showChild && it.children.length === 0) {
        this.search(it)
      }
      it.showChild = !it.showChild
    },
    toReply (it) {
      this.needLogin(() => {
        this.prev = it
        this.content = ''
        this.visible = true
      })
    },
    reply () {
      if (this.content.length === 0) {
        this.$warning({ title: '请输入评论内容' })
        return
      }
      this.$http.post('/zg-system/reply/next/add', {
        replyId: this.prev.id,
        content: this.content
      }, () => {
        this.visible = false
        this.search(this.prev)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.reply{
  border:solid 1px #f2f2f2;
  padding:10px;
  margin-bottom:10px;
  position:relative;
  padding-left:60px;
  .outter{
    display:inline-block;margin-right:10px;
    cursor:pointer;
    &:hover{
      color:#1076d6
    }
  }
}
</style>
